<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">

  <!-- This page displays all departments in list form, with buttons for
    adding and deleting departments -->

  <h:head>
    <title>IGNORED</title>
  </h:head>
  <h:body>
    <ui:composition template="/templates/layout.xhtml">
      <ui:define name="content">
        <!-- This page displays the list of departments with
        links for editing, and a button for creating new ones -->
        <h2>Offices</h2>

        <!-- The dataTable tag is used to display the list.
        It works a bit like a for-each loop in java. The
        var attribute binds the name dep to each department in turn
        -->
        <h:dataTable value="#{officelistbean.offices}" var="office"
                     styleClass="data">
          <h:column>
            <f:facet name="header">Room No</f:facet>
            <h:link outcome="office?roomNo=#{office.roomNo}">#{office.roomNo}</h:link>
          </h:column>
          <h:column>
            <f:facet name="header">Size *(sq.m.)</f:facet>
            #{office.sizeSqMeter}
          </h:column>
        </h:dataTable>

        <h:link value="New Office" outcome="office?roomNo=0" />
      </ui:define>
    </ui:composition>
  </h:body>
</html>